<template>
    <div>
        <el-menu :default-active="activeRouter" mode="horizontal" class="bdr-top-10" in>
            <el-menu-item v-for="(item) in tabs" :key="item.value" :index="item.value"
                            @click.native="changeItem(item)">
                <span>{{item.label}} <i class="iconfont icon-paihang"></i></span>
            </el-menu-item>
        </el-menu>
        <v-plain-table :data="tableData" :operation="false" @change='change'></v-plain-table>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator'
    import vPlainTable from '@/components/plain-table'
    import { Getter } from 'vuex-class'

    @Component({
        components: {
            vPlainTable
        }
    })
    export default class Rank extends Vue {
        @Getter userInfo

        roleType = ''
        rankType = ''
        url = ''
        tableData: TableData = {
            header: [
                {
                    key: 'enterprise_name',
                    label: '企业名称'
                },
                {
                    key: 'bill_sum',
                    label: '票据数量'
                },
                {
                    key: 'clerk_name',
                    label: '业务员'
                },
                {
                    key: 'turnover',
                    label: '交易额'
                }
            ],
            body: [
                {
                    enterprise_name: '',
                    bill_sum: '',
                    clerk_name: '',
                    turnover: ''
                },
                {
                    enterprise_name: '',
                    bill_sum: '',
                    clerk_name: '',
                    turnover: ''
                }
            ],
            footer: {
                total: 999,
                currentPage: 1
            }
        }
        tabs = [
            {
                label: '企业交易额排名',
                value: '1'
            }
        ]

        async getRank () {
            console.log(this.url)
            let res: AjaxResponse = await this.$axios.post(this.url, {
                userId: this.userInfo.userId,
                type: 0,
                isHome: 1,
                currentPage: this.tableData.footer.currentPage,
                pageSize: 10
            })
            if (res.responseCode === 200) {
                
                if(this.roleType == 5){
                    if(this.rankType == 1){
                        this.tableData.body = res.data.ent_rank.items
                        this.tableData.footer.total = res.data.ent_rank.totalNum
                        this.tableData.footer.currentPage = res.data.ent_rank.currentPage
                    }else{
                        this.tableData.body = res.data.clerk_rank.items
                        this.tableData.footer.total = res.data.clerk_rank.totalNum
                        this.tableData.footer.currentPage = res.data.clerk_rank.currentPage
                    }
                }else{
                    this.tableData.body = res.data.items
                    this.tableData.footer.total = res.data.totalNum
                    this.tableData.footer.currentPage = res.data.currentPage
                }
            }
        }
        
        change (page) {
            this.tableData.footer.currentPage = page
            this.getRank()
        }

        get activeRouter () {
            return this.rankType
        }

        changeItem (item) {
            this.rankType = item.value
            this.changeHedaer(item.value)
            this.getRank ()
        }

        async changeHedaer (rankType) {
            if(this.roleType == 5){
                if(rankType == 2){
                    this.tableData.header = [
                        {
                            key: 'clerk_name',
                            label: '业务员'
                        },
                        {
                            key: 'ent_sum',
                            label: '企业数量'
                        },
                        {
                            key: 'turn_over',
                            label: '交易额'
                        }
                    ]
                }else{
                    this.tableData.header = [
                        {
                            key: 'enterprise_name',
                            label: '企业名称'
                        },
                        {
                            key: 'bill_sum',
                            label: '票据数量'
                        },
                        {
                            key: 'clerk_name',
                            label: '业务员'
                        },
                        {
                            key: 'turnover',
                            label: '交易额'
                        }
                    ]
                }
            }else{
                this.tableData.header = [
                    {
                        key: 'enterprise_name',
                        label: '企业名称'
                    },
                    {
                        key: 'bill_sum',
                        label: '票据数量'
                    },
                    {
                        key: 'turnover',
                        label: '交易额'
                    }
                ]
            }
        }

        mounted() {
            this.roleType = this.userInfo.roleType
            this.rankType = this.$route.params.id
            switch (this.roleType) {
                case 4:
                    this.url = 'g/gateway/rank/getForChannelClerk';
                    this.tabs = [
                        {
                            label: '企业交易额排名',
                            value: '1'
                        }
                    ]
                break;
                case 5:
                    this.url = 'g/gateway/rank/getForChannel'
                    this.tabs = [
                        {
                            label: '企业交易额排名',
                            value: '1'
                        },
                        {
                            label: '业务员交易排名',
                            value: '2'
                        }
                    ]
                break;
            }   
            this.getRank ()
            this.changeHedaer(this.rankType)
        }
    }
</script>

<style lang="less" scoped>
    .is-active span{
        color: #409EFF;
    }
    .el-menu-item span{
        font-size: 16px;
    }
</style>

